import React from 'react'
import { Row, Col, Button, Space } from 'antd';
import './12.less';

export default function ShanCom() {
  return (
    <div style={{ width: 1200, margin: '0 auto' }}>
      <h2>24列栅格</h2>
      <Row gutter={[16, 16]}>
        {
          Array(24).fill(1).map((item, index) => {
            return <Col key={index} xs={12} sm={8} md={6} lg={4} xl={3} xxl={2}>
              <div className="item-div">text</div>
            </Col>
          })
        }

      </Row>
      <h2>列偏移</h2>
      <Row gutter={[16, 16]}>
        <Col span={6} offset={9}>
          <div className="item-div">text</div>
        </Col>
      </Row>

      <h2>间距</h2>
      <Space size={20}>
        <Button>AAA</Button>
        <Button>BBB</Button>
      </Space>
      <h2>垂直方向</h2>
      <Space size={10} direction="vertical">
        <Button>AAA</Button>
        <Button>BBB</Button>
      </Space>
    </div>
  )
}
